<template>
  <div>
    <div style="display: flex;height: 300px">
      <TreeSelect v-model="selectItem" size="small" :data="data" node-key="id" label-key="label" value-key="id" />
      <h3 style="margin-left: 20px;">{{this.selectItem}}</h3>
    </div>

    <hr/>
    <div style="display: flex;">
      <TreeSelectMulti
          multiple
          v-model="selectItemList"
          :check-strictly="true"
          value-key="id"
          label-key="label"
          node-key="id"
          :data="data"
          size="small">
      </TreeSelectMulti>
    </div>


    <h2 style="margin-top: 200px">{{this.selectItemList}}</h2>
  </div>
</template>

<script>
import TreeSelect from "@/components/TreeSelect/TreeSelect";
import TreeSelectMulti from "@/components/TreeSelect/TreeSelectMulti";
import {MyUtil} from "@/lib/util";
export default {
  name: "TreeSelectTest",
  components: {
    TreeSelect,
    TreeSelectMulti
  },
  data() {
    return {
      selectItem: '',
      selectItemList: [],
      data: [{
        id: '1001',
        label: '湖北省',
        children: [{
          id: '1002',
          label: '武汉市',
          children: [{
            id: '1021',
            label: '洪山区'
          }]
        }]
      }, {
        label: '陕西省',
        id: '1003',
        children: [{
          id: '1004',
          label: '西安市',
          children: [{
            id: '1005',
            label: '未央区'
          }]
        }, {
          id: '1006',
          label: '渭南市',
          children: [{
            id: '1007',
            label: '富平县'
          }]
        }]
      }, {
        id: '1008',
        label: '河南省',
        children: [{
          id: '1009',
          label: '郑州市',
          children: [{
            id: '1010',
            label: '金水区'
          }]
        }, {
          id: '1011',
          label: '周口市',
          children: [{
            id: '1012',
            label: '太康县'
          }]
        }]
      }]
    }
  },
  methods: {
    handleSubmit() {
      console.log(MyUtil.toPlanObj(this.selectItem));
    }
  }

}
</script>

<style scoped>

</style>